<template>
  <div class='notice-container'>
    <el-container class="main-container">
      <el-aside>
         <div class="notice-top">
            <el-row>
              <el-col span="22">
                <el-input 
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    size="small"
                    v-model="input2">
                </el-input>
              </el-col>
              <el-col span="2">
                <el-button icon="el-icon-search" circle size="small" @click="search"></el-button>
              </el-col>
           </el-row>
           <div class="focus-tag">
           </div>
         </div>
         <div  class="notice-list">
           <div class="notice-scroll">
            <div class="notice-item" v-for="(noticeItem,index) in noticeMsgList" :key="index" @contextmenu="showMenu(noticeItem)"  @click="selectItem(index,noticeItem)">
              <div :class="selectIndex == index? 'click-item' : 'over-item'"  style="position: relative;">
                <svg-icon v-if='noticeItem.top' iconClass="top"  class="to-top"/>
                <div style="float:left; width:45px;">
                  <el-image v-if="noticeItem.senderHeadImgUrl"
                    class="head-image"
                    :src="noticeItem.senderHeadImgUrl"
                    fit="cover"
                    @error="imageLoadError(noticeItem)">
                  </el-image>
                  <div class="head-image-text" v-if="!noticeItem.senderHeadImgUrl">
                    {{noticeItem.sendRealName.substring(noticeItem.sendRealName.length - 2)}}
                  </div>
                </div>
                <div style="float:left; padding-top:1px;">
                  <div style="font-weight:bolder; font-size:14px">
                    {{noticeItem.bizSceneName}}
                  </div>
                  <div class="notice-tips-title" v-html="noticeItem.msgTitle">
                  </div>
                </div>
                <div style="float:right;width:80px; font-size:12px;color:#999999; text-align:right; ">
                  <span style="float:right;display:block;width:100%">{{$toolUtil.transDate(noticeItem.createDatetime)}}</span>
                  <span style="float:right;display:block; padding:0 2px 0 2px;margin-top:5px;font-size:8px;color:#fff; background-color:#ff0000; width:20px; border-radius:10px; text-align:center">
                    {{noticeItem.notReadCnt > 0 ? noticeItem.notReadCnt: ''}}
                  </span>
                </div>
              </div>
              <vue-context-menu :contextMenuData="contextMenuData"
                  @setTop="setTop"
                  @cancelTop="cancelTop">
              </vue-context-menu>
            </div>
           </div>
         </div>
      </el-aside>
      <el-main v-if="currentMsgObject.sendMsgUserName">
        <div class="msg-top">
           <div style="float:left; width:100%;">
              <div style="float:left; width:45px;">
                  <el-image v-if="currentMsgObject.senderHeadImgUrl"
                    class="head-image"
                    :src="currentMsgObject.senderHeadImgUrl"
                    fit="cover"
                    @error="imageLoadError(currentMsgObject)">
                  </el-image>
                  <div class="head-image-text" v-if="!currentMsgObject.senderHeadImgUrl">
                    {{currentMsgObject.sendRealName.substring(currentMsgObject.sendRealName.length - 2)}}
                  </div>
              </div>
              <div style="float:left; padding-top:1px;">
                <div style="font-weight:bolder; font-size:14px">
                  {{currentMsgObject.bizSceneName}}
                </div>
                <div style="font-size:10px; color:#666666;padding-top:2px;">
                    当前状态：工作繁忙
                </div>
              </div>
              <div style="float:right;width:50px; font-size:12px;color:#999999; text-align:right; ">
                删除
              </div>
            </div>
        </div>
        <div class="msg-container" :style="currentMsgObject.msgType == '0'?'padding-bottom: 165px;':'border-bottom:35px solid #fff;'">
          <div ref="chatContent" class="msg-scroll">
            <div v-for="(msgItem,index) in currentMsgList" :key="index">
              <div class="msg-item">
                <div class='msg-timeline'>
                  {{$toolUtil.transDate(msgItem.createDatetime)}}
                </div>
                <div style="float:left; width:45px;">
                  <el-image v-if="msgItem.senderHeadImgUrl"
                    class="head-image"
                    :src="msgItem.senderHeadImgUrl"
                    fit="cover"
                    @error="imageLoadError(msgItem)">
                  </el-image>
                  <div class="head-image-text" v-if="!msgItem.senderHeadImgUrl">
                    {{msgItem.sendRealName.substring(msgItem.sendRealName.length - 2)}}
                  </div>
                </div>
                <div style="float:left; padding-top:0px;">
                  <!-- 聊天消息 -->
                  <div v-if="msgItem.msgType == '0'" :class="msgItem.sendMsgUserName == userInfo.userName? 'msg-chat-self': 'msg-chat'" v-html="msgItem.msgContent"   @click="showImg($event)"></div>
                  <!-- 卡片消息 -->
                  <div v-if="msgItem.msgType == '1'" class="msg-card"> 
                    <div  class="msg-card-title" v-html="msgItem.msgTitle"  @click="showImg($event)"></div>
                    <div  class="msg-card-content" v-html="convertMsg(msgItem.msgContentJson)"  @click="showImg($event)">
                       <!--  -->
                    </div>
                  </div>
                </div>
                <div style="float:left;width:50px; font-size:12px;color:#999999; text-align:left; ">
                  <div class="msg-tips">
                    <el-dropdown :hide-on-click="false" trigger='click'  @command="handleCommand">
                      <span class="el-dropdown-link">
                        <i class="el-icon-more el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="msgItem">引用</el-dropdown-item>
                        <el-dropdown-item :command="msgItem">收藏</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="msg-footer"  v-if="currentMsgObject.msgType == '0'"> 
          <!--  -->
          <avue-ueditor style="float:left;width:90%" v-model="content" 
                  :options="options" ></avue-ueditor>
          <el-button style="float:right;width:10%; height:132px; font-size:20px;" type="primary" size="small" @click="sendMessage">发送</el-button>
        </div>
      </el-main>
      <el-main v-else class="el-main-else">
        沟通从这里开始
      </el-main>
    </el-container>
    <!-- 富文本图片放大 -->
    <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">
      <i class="el-icon-close" id="imgDolgClose" @click.stop="imgPreview.show = false"></i>
      <el-image  @click.stop="imgPreview.show = true" :src="imgPreview.img"  fit='cover'></el-image>
    </div>
  </div>
</template>

<script>
import {saveSysMsgNotice,querySysMsgList,querySysMsgNoticeList,saveOrUpdateSysMsgNoticeList,saveOrUpdateSysMsgNotice} from '@/api/system/sysMsgNoticeApi';
import {mapGetters} from 'vuex';
import {reqCommonMsg } from '@/util/reqCommonMsg';
import {filterFormat} from '@/util/util';
const appData = require('@/views/system/notice/emoji.json');
export default {
  data() {
    return {
      //定时器
      timer: null,
      //浏览文件
      imgPreview:{
        img:'',
        show:false
      },
      //消息发送框
      content: '',
      options: {
        action: '/file/upload',
        props: {
          res: '',
          url: 'filePath',
        },
        customConfig: {
          showHtml: false,
          showFullScreen: false,
          showMenuTooltips: false,
          menus:[
            'emoticon',  // 表情
            'image',  // 插入图片
          ]
        },//wangEditor编辑的配置
      },
      //值顶的列表
      topNoticeList: [],
      //普通列表
      normalMsgList: [],
      topMsgList: [],

      //模拟构建消息结构
      noticeMsgList:[],

      //当前消息对象
      currentMsgObject: {},
      currentMsgList: [],

      //选择索引，选择后列表变灰色
      selectIndex: 99999,

      // 右键菜单
      // contextmenu data (菜单数据)
      contextMenuData: {
        // the contextmenu name(@1.4.1 updated)
        menuName: 'demo',
        // The coordinates of the display(菜单显示的位置)
        axis: {
          x: null,
          y: null
        },
        // Menu options (菜单选项)
        menulists: [{
          fnHandler: 'setTop', // Binding events(绑定事件)
          icoName: 'el-icon-upload2', // icon (icon图标 )
          btnName: '置顶' // The name of the menu option (菜单名称)
        }, {
          fnHandler: 'cancelTop',
          icoName: 'el-icon-download',
          btnName: '取消置顶'
        }]
      },
      currentMenuItem: {},

      data: [],
      // 请求参数区
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: {},
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    };
  },
  computed: {
    ...mapGetters(['website','userInfo','orgTree','permission','socketConnection','msgObject','msgObject']),
  },
  created(){
    this.topMsgList = this.$getStore({name:  this.userInfo.userId +'topMsgList'}) || [];
    //链接socket 发送消息
    this.getNoticeSocket();
  },
  mounted() {
    this.onLoad();
  },
  destroyed() {
    clearInterval(this.timer);
    this.$store.dispatch('setMsgObject',{msgBox: true,notReadCnt: this.msgObject.notReadCnt});
  },
  watch:{
    currentMsgList: {
      handler(newValue, oldValue) {
        //滚动到对话最下方
        setTimeout(() => {
          this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
        }, 100);
      },
      deep: true
    }
  },
  methods: {
    /**
     * 格式化通知消息
     */
    convertMsg(msgJson){
      let msgHtml = '';
      if(msgJson){
        let msgObj = JSON.parse(msgJson);
        if(msgObj.first){
          msgHtml += '<div style="font-size:14px;  padding:5px 0 10px 0 ;color:#666;">'+msgObj.first+'</div>';
        }
        if(msgObj.label1){
          msgHtml += '<div style="font-size:14px; position: relative; padding:5px 0;"><div style="font-weight:bold; color:#888; float:left; width:90px">'+msgObj.label1+'：</div>'+msgObj.keyword1+'</div>';
        }
        if(msgObj.label2){
          msgHtml += '<div style="font-size:14px; position: relative; padding:5px 0;"><div style="font-weight:bold; color:#888; float:left; width:90px">'+msgObj.label2+'：</div>'+msgObj.keyword2+'</div>';
        }
        if(msgObj.label3){
          msgHtml += '<div style="font-size:14px; position: relative; padding:5px 0;"><div style="font-weight:bold; color:#888; float:left; width:90px">'+msgObj.label3+'：</div>'+msgObj.keyword3+'</div>';
        }
        if(msgObj.label4){
          msgHtml += '<div style="font-size:14px; position: relative; padding:5px 0;"><div style="font-weight:bold; color:#888; float:left; width:90px">'+msgObj.label4+'：</div>'+msgObj.keyword4+'</div>';
        }
        if(msgObj.label5){
          msgHtml += '<div style="font-size:14px; position: relative; padding:5px 0;"><div style="font-weight:bold; color:#888; float:left; width:90px">'+msgObj.label5+'：</div>'+msgObj.keyword5+'</div>';
        }
        if(msgObj.label6){
          msgHtml += '<div style="font-size:14px; position: relative; padding:5px 0;"><div style="font-weight:bold; color:#888; float:left; width:90px">'+msgObj.label6+'：</div>'+msgObj.keyword6+'</div>';
        }
        if(msgObj.remark){
          msgHtml += '<div style="font-size:14px; position: relative; padding:5px 0;"><div style="font-weight:bold; color:#888; float:left; width:90px">备注：</div>'+msgObj.remark+'</div>';
        }
      }
      else{
        msgHtml = '内容解析错误！';
      }
      return msgHtml;
    },
    // 图片点击放大
    showImg(e) {
      if (e.target.tagName == 'IMG') {
        this.imgPreview.img = e.target.src
        this.imgPreview.show = true
      }
    },
    /**
     * 处理未读标记
     */
    handleNotReadFlag(updateNotReadCnt){
      let notReadList = [];
      this.currentMsgList.forEach(element => {
        if(element.readStatus == '0' && element.acceptMsgUserName == this.userInfo.userName){
          notReadList.push({
            id: element.id,
            readStatus: '1',
            createUserName: element.createUserName
          });
          element.readStatus = '1'
        }
      });
      //批量更新已读标记
      if(notReadList.length > 0){
        if(updateNotReadCnt == 1){
          this.$store.dispatch('setMsgObject',{msgBox: false,notReadCnt: (this.msgObject.notReadCnt - notReadList.length)}); 
        }
        //更新未读标志
        this.reqParams.listBody = notReadList;
        this.commonData = reqCommonMsg(this.reqParams)
        saveOrUpdateSysMsgNoticeList(this.commonData).then(res => {
          this.$console.log('==>> 批量更新成功');
        }, error => {
        });
      }
    },
    /**
     * 加载消息列表数据
     */
    onLoad() {
      this.commonData = reqCommonMsg(this.reqParams)
      querySysMsgNoticeList(this.commonData).then(res => {
        this.noticeMsgList = res.data.body.listBody;
        this.noticeMsgList = this.noticeMsgList.sort(this.sortByDatetime);
        let notReadCnt = 0;
        this.topNoticeList = [];
        this.normalMsgList = [];
        this.noticeMsgList.forEach((element,index) => {
          if(element.notReadCnt > 0){
            notReadCnt += element.notReadCnt;
          }
        });
        //处理置顶
        this.handleTop();
        //更新未读条数
        this.$store.dispatch('setMsgObject',{msgBox: false,notReadCnt: notReadCnt});
      }, error => {
      });
    },
    /**
     * 点击选择事件
     */
    selectItem(index,item){
      //如果已选择，则不再请求
      if(this.selectIndex == index){
        return false;
      }
      item.notReadCnt = 0;
      this.currentMsgObject = item;
      this.currentMsgList=[];
      this.selectIndex =  index;

      //条件查询我发的和我接受的
      this.reqParams =  {
        singleBody: {
          sendMsgUserName: item.sendMsgUserName,
          acceptMsgUserName: this.userInfo.userName,
          bizSceneName: item.msgType == '0'? '聊天消息' : item.bizSceneName
        }
      }
      this.commonData = reqCommonMsg(this.reqParams)
      querySysMsgList(this.commonData).then(res => {
        this.currentMsgList = res.data.body.listBody;
        this.currentMsgList = this.currentMsgList.sort(this.sortByDatetimeAsc);
        //变动时处理未读标记
        this.handleNotReadFlag(1);
      }, error => {
      });
    },
    /**
     * 处理接收消息
     */
    handleMsg(msgData){
      //更新条数标志
      let updateNotReadCnt = 0;
      //聊天消息
      if(msgData.msgType == '0'){
        //如果是当前打开窗口，则直接显示在对话框窗口
        if(msgData.sendMsgUserName == this.currentMsgObject.sendMsgUserName && msgData.bizSceneName == this.currentMsgObject.bizSceneName){
          //新增消息
          msgData.readStatus = '0'
          this.currentMsgList.push(msgData);
          this.currentMsgList = this.currentMsgList.sort(this.sortByDatetimeAsc);
          if(this.currentMsgObject.msgTitle){
            this.currentMsgObject.msgTitle = msgData.msgContent;
            this.currentMsgObject.createDatetime = msgData.createDatetime;
          }
          updateNotReadCnt = 0;
          //延时更新未读标志
          setTimeout(() => {
            //更新未读标志
            this.reqParams.singleBody = {
              id: msgData.id,
              readStatus: '1'
            };
            this.commonData = reqCommonMsg(this.reqParams)
            saveOrUpdateSysMsgNotice(this.commonData).then(res => {
              this.$console.log('==>> 消息状态更新成功！');
            }, error => {
            });
          }, 100);
        }
        else {
          updateNotReadCnt = 1;
          //处理提示列表，如果提示列表中没有则新增
          let isInList = false;
          this.noticeMsgList.forEach(element => {
            if(element.sendMsgUserName == msgData.sendMsgUserName  && element.bizSceneName == msgData.bizSceneName){
              isInList = true;
              element.notReadCnt++;
              element.msgTitle = msgData.msgContent;
              element.createDatetime = msgData.createDatetime;
            }
          });
          if(!isInList){
            msgData.notReadCnt = 1;
            this.noticeMsgList.push(msgData);
          }
          this.noticeMsgList = this.noticeMsgList.sort(this.sortByDatetime);
          //处理置顶
          this.handleTop();
        }
      }
      //处理其他消息
      else if(msgData.msgType != '0'){ 
        if( msgData.bizSceneName == this.currentMsgObject.bizSceneName){
          //新增消息
          msgData.readStatus = '0'
          this.currentMsgList.push(msgData);
          this.currentMsgList = this.currentMsgList.sort(this.sortByDatetimeAsc);
          if(this.currentMsgObject.msgTitle){
            this.currentMsgObject.msgTitle = msgData.msgTitle;
            this.currentMsgObject.createDatetime = msgData.createDatetime;
          }
          updateNotReadCnt = 0;
        }
        else{
          updateNotReadCnt = 1;
          //处理提示列表，如果提示列表中没有则新增
          let isInList = false;
          this.noticeMsgList.forEach(element => {
            if(element.bizSceneName == msgData.bizSceneName){
              isInList = true;
              element.notReadCnt++;
              element.msgTitle = msgData.msgTitle;
              element.createDatetime = msgData.createDatetime;
            }
          });
          if(!isInList){
            msgData.notReadCnt = 1;
            this.noticeMsgList.push(msgData); 
          }
          this.noticeMsgList = this.noticeMsgList.sort(this.sortByDatetime);
          this.handleTop();
        }
      }
      //变动时处理未读标记
      this.handleNotReadFlag();
      //更新未读条数
      this.$store.dispatch('setMsgObject',{msgBox: false,notReadCnt: (this.msgObject.notReadCnt + updateNotReadCnt)});
    },

    /**
     * 处理置顶
     */
    handleTop(){
      //处理置顶
      this.topNoticeList = [];
      this.normalMsgList = [];
      this.noticeMsgList.forEach((element,index) => {
        if(this.topMsgList.indexOf(element.sendMsgUserName + '#' + element.bizSceneName) > -1){
          element.top=true;
          this.topNoticeList.push(element);
        }
        else{
          element.top=false;
          this.normalMsgList.push(element);
        }
      });
      this.noticeMsgList = [];
      this.topNoticeList = this.topNoticeList.sort(this.sortByDatetime);
      this.noticeMsgList.push(
        ...this.topNoticeList
      )
      this.noticeMsgList.push(
        ...this.normalMsgList
      )

      this.$setStore({name:  this.userInfo.userId+'topMsgList', content: this.topNoticeList});
    },
    /**
     * 时间排序 DESC
     */
    sortByDatetime(a, b) {
      return new Date(b.createDatetime)-new Date(a.createDatetime);
    },
    /**
     * 时间排序 ASC
     */
    sortByDatetimeAsc(a, b) {
      return new Date(a.createDatetime)-new Date(b.createDatetime);
    },

    /**
     * 图片错误时用名字后两位代替
     */
    imageLoadError(userName){
      userName.senderHeadImgUrl = '';
    },

    /**
     * 
     */
    sendMessage(){
      if(this.content == ''){
        return false; 
      }
      this.content = this.content.replace(/<p>|<\/p>/gi, '');

      //组装消息内容显示到消息框
      let sendMsgObj = {
        tenantId: this.userInfo.tenantId,
        sendMsgUserName: this.userInfo.userName,
        sendRealName: this.userInfo.realName,
        senderHeadImgUrl: this.userInfo.avatar,
        acceptMsgUserName: this.currentMsgObject.sendMsgUserName,
        acceptRealName: this.currentMsgObject.sendRealName,
        createDatetime: this.$toolUtil.formatTimes(new Date()),
        msgType: '0',
        bizSceneName: '聊天消息',
        msgTitle: this.userInfo.realName+'给您发送了一条消息，请前往查看>>',
        msgContent: this.content,
        readStatus: '0',
        validFlag: '1',
      }
      //添加记录
      this.currentMsgList.push(sendMsgObj);
      this.currentMsgList = this.currentMsgList.sort(this.sortByDatetimeAsc);
      this.currentMsgObject.msgTitle = this.content;
      this.currentMsgObject.createDatetime = this.$toolUtil.formatTimes(new Date());
      this.noticeMsgList = this.noticeMsgList.sort(this.sortByDatetime);

      this.handleTop();

      this.selectIndex = 0;
      //写入记录
      this.reqParams.singleBody = sendMsgObj;
      this.commonData = reqCommonMsg(this.reqParams)
      saveSysMsgNotice(this.commonData).then(() => {
      }, error => {
        this.$console.log(error);
      });
      this.content = '';
    },

    /**
     * 右键菜单
     */
    showMenu (item) {
      this.currentMenuItem = item;
      event.preventDefault()
      var x = event.clientX
      var y = event.clientY
      // Get the current location
      this.contextMenuData.axis = {
        x, y
      }
      if(item.top){
        this.contextMenuData.menulists = [{
          fnHandler: 'cancelTop', // Binding events(绑定事件)
          icoName: 'el-icon-download', // icon (icon图标 )
          btnName: '取消置顶' // The name of the menu option (菜单名称)
        }]
      }
      else{
        this.contextMenuData.menulists = [{
          fnHandler: 'setTop', // Binding events(绑定事件)
          icoName: 'el-icon-upload2', // icon (icon图标 )
          btnName: '置顶' // The name of the menu option (菜单名称)
        }] 
      }
    },

    /**
     * 置顶
     */
    setTop () {
      if(this.topMsgList.indexOf(this.currentMenuItem.sendMsgUserName+'#'+this.currentMenuItem.bizSceneName) < 0){
        this.topMsgList.push(this.currentMenuItem.sendMsgUserName+'#'+this.currentMenuItem.bizSceneName);
        this.handleTop();
      }
    },

    /**
     * 取消置顶
     */
    cancelTop () {
      this.topMsgList.forEach((element,index) => {
        if(element == this.currentMenuItem.sendMsgUserName+'#'+this.currentMenuItem.bizSceneName){
          this.topMsgList.splice(index,1);
        }
      });
      this.handleTop();
    },
    /**
     * 消息菜单处理
     */
    handleCommand(msgItem){
      var orgContent = msgItem.msgContent;//.replace(/<\/?.+?>/g, '');
      this.content = '<br><div style="padding:10px;background-color:#f8f8f8;font-size:12px; display:block; border:1px solid #f0f0f0; border-radius:5px"> <span style="font-size:12px; font-weight:bold;">引用：</span>'+orgContent+'</div>'+ this.content;
    },
    /**
     * 查找
     */
    search(){
      console.log(this.socketConnection.readyState);
      if(this.socketConnection){
        //this.socketConnection.close();
      }
    },

    /**
     * 判断链接是否有效
     */
    getNoticeSocket(){
      if (this.socketConnection && this.socketConnection.readyState == this.socketConnection.OPEN) {
        setTimeout(() => {
          this.handleSocketMsg();
        }, 2000);
      }
      //如果已存在timer 则先清理
      if(this.timer){
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.handleSocketMsg();
      }, 5000);
    },

    /** 
     * 消息通知
     */
    handleSocketMsg() {
      console.log('==开始链接socket 003 消息...');
      //如果断开，则重新链接；
      if(this.socketConnection.readyState != this.socketConnection.OPEN){
        this.$store.dispatch('setSocketConnection', this.userInfo);
      }
      
      let that = this;
      that.$store.dispatch('setMsgObject',{msgBox: false,notReadCnt: this.msgObject.notReadCnt});    
      this.socketConnection.onmessage = function(msg) {
        that.$console.log('消息内容003 msg==',msg);
        let msgData = JSON.parse(msg.data);
        if(msgData.type && msgData.type == 'command'){
        //清理缓存并退出
          if(msgData.commandName == 'clearStorage'){
            let tenantId = localStorage.getItem('tenantId');
            that.$clearStore();
            that.$clearStore({type: 's'});
            window.location.href='/#/index?tenantId='+tenantId+'&v1';
            window.location.reload();
          }
        }
        //处理接收到的消息
        if(msgData.type && msgData.type == 'message'){
          //console.log('==msgData==',msgData);
          msgData.bizSceneName = msgData.sendRealName;
          that.handleMsg(msgData);
          
          let content ={
            title: msgData.sendRealName,
            body: msgData.msgTitle,
            icon: msgData.senderHeadImgUrl
          }
          that.notify(content);
        }
      };
    },
    /**
     * 新消息浏览器通知
     */
    notify(content){
      var that = this;
      var notification = new Notification(content.title, {
        body: content.body,
        icon: content.icon || 'https://avatar.csdnimg.cn/B/D/8/1_qq_34273059.jpg',
        data: {
          url: content.url || '/notice/index'
        }
      });
      notification.onclick = function() {
        this.$console.log('==>>点击了消息');
        that.$router.push({ path: notification.data.url});
      };
      notification.onclose = function () {
        this.$console.log('==>>消息已关闭');
      }
      notification.onerror = function (err) {
        console.log('==>>通知出错了，请检查权限..');
        throw err;
      }
    }
  }
};
</script>

<style lang="scss">
 .notice-container{
    padding: 0px 10px;
    height: 100% !important;
    .main-container{
      height: 100% !important;
      .head-image{
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: #fff;
      }
      .head-image-text{
        padding: 12px 0px;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: rgb(76, 141, 179);
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
      }
      .el-aside {
        background-color: #FFFFFF;
        color: #333;
        text-align: left;
        width: 400px !important;
        .el-input__inner{
          border-radius: 20px !important;
        }
        .notice-top{
          padding: 20px;
          position:absolute;
          width: 400px;
          height: 70px;
          background-color: #FFFFFF;
          border-bottom: 1px solid #e0e0e0;
          .focus-tag{
            min-width: 100px;
          }
        }
        .notice-list{
          padding: 0px;
          padding-bottom: 50px;
          width:400px;
          position: absolute;
          top: 70px;
          bottom: 0;
          overflow: hidden; /*外部不滚动，内部滚动，内容超出隐藏*/
          .notice-scroll{
            width: 100%;
            height: 100%;     /*高度填满外部*/
            overflow-y:scroll;/*内部滚动*/
            .notice-item{
              height:55px; 
              float:left; 
              width:100%; 
              margin-top:10px;
              .over-item{
                width:100%; 
                float:left; 
                background-color: #fff;
                padding:10px;
                -webkit-transition: 0.5s all;
                cursor: pointer;
              }
              .over-item:hover{
                background-color: #e3e3e3;
                -webkit-transition-delay: 0s;
                -moz-transition-delay: 0s;
                -ms-transition-delay: 0s;
                transition-delay: 0s;
              }

              .click-item{
                width:100%; 
                float:left; 
                background-color: #f0f0f0;
                padding:10px;
                -webkit-transition: 0.5s all;
                cursor: pointer;
              }
              .notice-tips-title{
                width: 250px;
                font-size:10px; 
                color:#666666;
                padding-top:2px;
                display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
                -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
                overflow: hidden; /*超出的文本隐藏*/
                text-overflow: ellipsis; /* 溢出用省略号*/
                -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
              }
              .to-top{
                position: absolute; 
                top:-4px; 
                right:10px; 
                font-size: 13px;
              }
            }
          }
        }
      }
      .el-main {
        background-color: #FFFFFF ;
        color: #333;
        text-align: left;
        padding:0px !important;
        border-left:0px !important;
        margin-left: 0px !important;
        border-left: 1px solid #e3e3e3 !important;
        width: 100%;
        position: relative;
        .msg-top{
          width: 100%;
          padding: 15px;
          position:absolute;
          height: 70px;
          background-color: #FFFFFF;
          border-bottom: 1px solid #e0e0e0;
        }
        .msg-container{
          background-color: #f7f7f7;
          padding: 0px;
          width:100%;
          position: absolute;
          top: 70px;
          bottom: 0;
          .msg-scroll{
            padding:10px;
            width: 100%;
            height: 100%;     /*高度填满外部*/
            overflow-y:scroll;/*内部滚动*/
            .msg-item{
              float:left; 
              width:100%; 
              padding:10px;
              // 聊天消息
              .msg-chat-self{
                background-color: #a9e87a;
                color: #000;
                padding: 10px 15px;
                font-size: 14px;
                border-radius: 5px;
                max-width: 700px;
                p{
                  margin-bottom: 0px !important;
                }
              }
               // 聊天消息
              .msg-chat{
                background-color: #cce3f1;
                color: #000;
                padding: 10px 15px;
                font-size: 14px;
                border-radius: 5px;
                max-width: 700px;
                p{
                  margin-bottom: 0px !important;
                }
              }
              // 卡片消息
              .msg-card{
                background-color: #fff;
                border:1px solid #e3e3e3;
                border-radius: 5px;
                width: 450px;
                .msg-card-title{
                  padding:10px;
                  border-bottom: 1px solid #e3e3e3;
                  font-size: 16px;
                  font-weight: bold;
                }
                .msg-card-content{
                  font-size: 12px;
                  padding: 10px;
                  line-height: 1.5;
                } 
              }
              
              .msg-timeline{
                width:100%; 
                text-align:center;
                font-size:10px; 
                color:#999;
                padding:10px;
              }
              .msg-tips{
                display: none;
              } 
            }
            .msg-item:hover {
              .msg-tips{
                border: 1px solid #e3e3e3;
                background-color: #f7f7f7;
                border-radius: 5px;
                width: 27px;
                padding: 2px 0;
                margin-left: 5px;
                display: block;
              }
              .msg-tips:hover{
                background-color: #fff;
              }
            }
          } 
        }
        .msg-footer{
          width: 100%;
          position: absolute;
          bottom:30px;
          // 发送框
          .w-e-text-container{
              height: 90px !important;
          }
          .w-e-full-screen-editor .w-e-text-container{
            height:calc(100% - 42px) !important;
          }
        }
      }
      .el-main-else {
        background-color: #f7f7f7 ;
        color: #333;
        text-align: center;
        padding:100px 0 !important;
        border-left:0px !important;
        margin-left: 0px !important;
        border-left: 1px solid #e3e3e3 !important;
        width: 100%;
        position: relative;
      }
    }
 }

//富文本图片放大
.imgDolg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  background-color: rgba(140, 134, 134, 0.6);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  #imgDolgClose {
    position: fixed;
    top: 35px;
    cursor: pointer;
    right: 7%;
    font-size: 50px;
    color: white;
  }
  img{
    width: 80%;
  }
}
  

</style>

